<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <title>Document</title>
 <script src='../public/js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <h1>{{fullName}}</h1>
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        message:'你好啊，李银河',
        firstName:'掐虎',
        lastName:'yoyo',
        year:0
      }
    },
    methods:{
 
    },
    /*
      计算属性不能带 "()"，等同于属性去使用； 
    */
    computed:{
      /*
        如果需要使用计算属性对的set方法需要添加参数，但是一般计算属性不会使用set方法；
        set 方法不需要 return 值； 
      */
      // 常用写法  
      // fullName() {  // es6 写法
      //   return this.firstName + '喜欢' + this.lastName;
      // }
      fullName: {
        set(newVal) {
          console.log("-------方法被调用",newVal);
          this.year = newVal;
          // return this.firstName + '喜欢' + this.lastName + this.year + '年了';
        },
        get() {
          return this.firstName + '喜欢' + this.lastName + this.year + '年了';
        }
      }
    }
  })
  let count = 1;
  setInterval(() => {
    app.fullName = count;
    count++
  },1500)
  </script>
</body>
</html>